<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">默认不可编辑</view>
			<view class="tui-page__desc">
				<text>edit：</text>
				<switch @change="switchChange" color="#5677fc"></switch>
			</view>
		</view>
		<view class="tui-page__bd">
			<tui-drag ref="drag" @change="change" @sortend="sortEnd" :listData="list" :itemHeight="itemHeight" :columns="1" border :isEdit="isEdit">
				<template slot-scope="{ entity, height, isEdit }">
					<tui-list-cell padding="0">
						<view class="tui-list__item" :style="{ height: height + 'rpx' }">
							<tui-icon name="offline-fill" :size="52" unit="rpx" color="#EB0909" @click="del(entity.id)" v-if="isEdit"></tui-icon>
							<text class="tui-text" :class="{ 'tui-pl': isEdit }">{{ entity.name }}</text>
							<image src="/static/images/extend/icon_classify.png"></image>
						</view>
					</tui-list-cell>
				</template>
			</tui-drag>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			itemHeight: 90,
			isEdit: false,
			list: [],
			columns: 3
		};
	},
	onLoad() {
		//如果异步返回数据，可手动调用初始化
		//this.$refs.drag && this.$refs.drag.init();
		this.list = [
			{
				id: 1,
				name: '内衣配饰'
			},
			{
				id: 2,
				name: '箱包手袋'
			},
			{
				id: 3,
				name: '美妆护肤'
			},
			{
				id: 4,
				name: '个人清洁'
			},
			{
				id: 5,
				name: '钟表珠宝'
			},
			{
				id: 6,
				name: '电脑办公'
			},
			{
				id: 7,
				name: '食品饮酒'
			},
			{
				id: 8,
				name: '运动户外'
			}
		];
	},
	methods: {
		switchChange(e) {
			this.isEdit = e.detail.value;
		},
		sortEnd(e) {
			console.log('sortEnd', e.listData);
		},
		change(e) {
			console.log('change', e.listData);
		},
		del(id) {
			this.tui.toast(`删除id=${id}`);
		}
	}
};
</script>

<style>
.tui-page__desc {
	width: 100%;
	display: flex;
	align-items: center;
}

.tui-page__desc switch {
	transform: scale(0.8);
	transform-origin: 0 center;
}

.tui-list__item {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;
}
.tui-list__item .tui-text {
	font-size: 30rpx;
	transition: transform 0.25s;
}
.tui-pl {
	transform: translate3d(16rpx, 0, 0);
}
.tui-list__item image {
	width: 40rpx;
	height: 40rpx;
	margin-left: auto;
}
</style>
